<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 项目布局
        下面的 4 个按钮 应该变成路由的链接 点击按钮切换不同的组件  中间放置一个 router-view 
        点击 路由 就会切换地址栏  地址栏的改变会被路由监听到  监听到之后会进行匹配  匹配之后就会知道到组件 然后放置相应位置即可 -->
    <!-- 在app里面应该放置3个部分  具体在app.vue中查看-->

    <!-- 项目规范与项目托管 
        SVN 或者  Git   统一开发的   gitinit？
        创建一个 .gitignore   编写一个项目的忽略文件  node_modules .idea  .vscode  .git
        创建 README.md  告知项目的相关信息的    # 就是写注释    
        放置一个 LICENSE的文件   开源项目的一个开源协议 MIT协议 
        然后就是创建本地的仓储了 git init  触发一下
        然后再命令行中 使用  git status   这里展示了所有文件的状态  untracked 就是未提交没有被跟踪的意思
        然后  git add . 将所有的文件放到 暂存树里面去了 
        git add . ：他会监控工作区的状态树，使用它会把工作时的所有变化提交到暂存区，包括文件内容修改(modified)以及新文件(new)，但不包括被删除的文件。
        然后再 执行 git status 就会发现  文件从红色变成了 绿色
        要提交的话  就是 git commit -m "init my project"    触发我们的项目
        这样只是把项目提交到本地的 git 里面去了

        如果想要把项目 上传到 异地的仓储 使用  Github 或者是 码云
            码云是国内服务器 上传代码和 下载代码 的速度比较快一些    github 是国外服务器 所以有限选择 码云
        注册 码云 点击设置  有一个 SSH公钥   设置好ssh公钥之后  就可以设置一个空的仓储了 
        在码云里面创建一个 空的仓储 把本地项目上传到上面就可以了
        创建空仓储  头像旁边有个加号---- 新建项目  然后名称是新的就是空的下面的选择语言那一栏不设置
        打对勾的东西 都不设置  创建的就是一个空的仓储
        创建完仓储之后  可以看到的是 三个大黑框 那就证明 创建的仓储就是空的
        全局配置一下 码云的账号密码  复制一下在cmd中配置一下就可以了
        创建仓储  就是假设我们没有项目 来提示我们创建项目      但是已经有了 直接cd 项目根目录 执行第二行 然后push一下就可以了
    -->
    <!-- 如果文件修改了  我们用 git status 然后就可以看到 有几个文件被标记修改了的  用传统方式(命令方式)把修改过后的代码上传到码云
        1. git add .        2. git commit -m "提交信息"     3.使用 git push
        在可视化工具 里面 点击 然后可以看到修改的文件 上面那个文本框可以添加 提示信息  然后点击提交 就可以提交到本地  
        然后点击省略符~   点击推送 推送就等同于 git push  然后就可以提交到码云了
    -->

    <!-- 制作首页 App 的组件
        完成 Header 区域 使用的是 Mint-UI 中的Header组件
        制作底部的 Tabber 区域 使用的是 MUI 的Tabbar.html
        要在中间放置一个 router-view 来展示路由匹配到的组件
        
        完成tabbar的小图标设置
        如果小图标的样式在 mui 的icon或者扩展图标中引用了但是显示不出来 我们就需要查看样式 看他是否引用了别的样式
        我们则可以根据引用样式也引入进去   然后复制并且引入这个文件之后  扩展的图标需要依赖于一个扩展的 ttf 文件
        需要拷贝一下icon.ttf文件
        在制作购物车小图标的时候 操作会相对多一些 
        --先把 扩展的 css样式 拷贝到项目中 拷贝我们的扩展字体库 ttf 文件到项目中 
            --为购物车小图标 添加如下样式 'mui-icon mui-icon-extra mui-icon-extra-cart'
    -->

    <!-- 完成 tabbar 路由链接的改造 
        在main.js中导入相对应的包和模块     在app.vue中设置好相对的路径     在router中设置点击之后的高亮显示

        实现路由的组件切换功能
        点击tabber中的路由链接 展示对应的路由组件       将路由和组件做一下对应关系
        在router.js中导入路由所对应的组件  路径 名称对应好  然后在app的页面中放置一个坑 方便内容之间的切换

        所有的组件都放到 components 中      手动拷贝过来的包放到Lib中间去       main.js  js入口
        index.html 页面入口  APP.vue 组件入口      router.js  是路由入口

        完成首页轮播图样式布局
        在main.js中按需导入一下包和模块就可以了  然后注册一下导入的组件
        加载首页轮播图数据
        获取数据 如何获取 使用 vue-resource 安装 vue-resource 的包
        cnpm i vue-resource -S
        导入 vue-resource  安装 Vue-resource 在main.js中导入
        安装完成之后就可以通过 this.$http 来发送请求了    
        
        1. 获取数据 如何获取呢  使用 vue-resource   2. 使用 vue-resource 的this.$http.get获取数据
        3. 获取到的数据 要保存到 data 身上          4. 使用 V-for 渲染循环 每个item 项目

        改造九宫格区域的样式

        
    -->
    

</body>

</html>